<template>
    <div class="components_header">
      <!--广告-->
      <div class="advertising">
        <span class="close">X</span>
        <div class="yeses">识货</div>
        <p>识货APP保障正品 0元抽限量AJ</p>
        <span class="download ">下载</span>
      </div>
      <!--轮播图区-->
      <div class="gw_slideshow_wrop">
          <div class="slidesho">
            <slideshow></slideshow>
          </div>
      </div>
      <!--分类区-->
      <ul class="classification">
        <li v-for="(val, key) in ClassificationList" :key="key">
          <img :src="val.CilImg" alt="">
          <p>{{val.CliTitle}}</p>
        </li>
      </ul>
      <!--团购区-->
      <div class="groupPurchase">
        <h5>识货团购</h5>
        <p class="subhead">正品低价&nbsp;售后无忧&nbsp;每天10点更新 </p>
        <ul>
          <li v-for="(item, key) in groupPurchaseList" :key="key">
            <img :src="item" alt="">
            <span>7折</span>
            <p>￥189</p>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
  import slideshow from '../lbt_plug/slideshow'
    export default {
      name: "appHeader.vue",
      data(){
        return{
          ClassificationList:[
            {CilImg: require('../../assets/xlpd.jpg'),CliTitle:'鞋类频道'},
            {CilImg: require('../../assets/lqzb.jpg'),CliTitle:'篮球装备'},
            {CilImg: require('../../assets/ppfs.jpg'),CliTitle:'品牌服饰'},
            {CilImg: require('../../assets/sjkw.jpg'),CliTitle:'手机酷玩'},
            {CilImg: require('../../assets/qbfl.png'),CliTitle:'手机分类'}
          ],
          groupPurchaseList:[
            require('../../assets/t1.jpg'),
            require('../../assets/t2.jpg'),
            require('../../assets/t3.jpg'),
            require('../../assets/t4.jpg')
          ]
        }
      },
      components:{
        slideshow
      },
      methods:{
        getUser (){
          this.$http.get('/usr')
            .then((res) => {
              console.log(res.data);
            })
            .catch((err) => {
              console.log(err);
            })
        }
      },
      created() {
        this.getUser()
      }
    }
</script>

<style scoped>
  .components_header{
    width: 100vw;
    height: 100%;
    background: #fff;
  }
  .advertising{
    height: 90px;
    line-height: 90px;
    border-bottom: solid 1px #747474;
    box-shadow: 0 1px 0 0 rgba(0,0,0, .3);
  }
  .advertising .close{
    display: inline-block;
    color: burlywood;
    width: 21px;
    height: 21px;
    margin-left: 30px;
  }
  .advertising .yeses{
    display: inline-block;
    width: 60px;
    line-height: 60px;
    background: orangered;
    color: aliceblue;
    border-radius:5px;
    text-align: center;
    vertical-align: center;
  }
  .advertising p{
    display: inline-block;
    font-size: 26px;
    color: #a3a3a3;
  }
  .advertising .download{
    display: inline-block;
    width: 107px;
    font-size: 35px;
    line-height: 50px;
    border: solid 1px #a3a3a3;
    text-align: center;
    float: right;
    margin-right: 42px;
    margin-top: 18px;
    color: brown;
  }
  .gw_slideshow_wrop{
    margin-top: 37px;
    width: 100%;
    height: 300px;
    background: #f4f7f9;
    box-sizing: border-box;
    padding: 0 30px 0 30px;
  }
  .slidesho{
    width: 100%;
    height: 100%;
    position: relative;
  }
  .classification{
    width: 100%;
    height: 222px;
    box-sizing: border-box;
    padding: 30px;
    list-style: none;
    font-size: 0;
    background: #fff;
  }
  .classification li{
    display: inline-block;
    width: 20%;
    height: 100%;
    padding-bottom: 20px;
    box-sizing: border-box;
    text-align: center;
  }
  .classification li img{
    width: 80%;
    height: 70%;
  }
  .classification li p{
    width: 100%;
    font-size: 25px;
    line-height: 60px;
    color: #a0a0a0;
  }
  .groupPurchase{
    width: 100%;
    height: 385px;
    padding: 30px;
    background: #f4f7f9;
    box-sizing: border-box;
  }
  .groupPurchase h5{
    font-size: 40px;
    color: #3e4141;
  }
  .groupPurchase .subhead{
    line-height: 50px;
    font-size: 26px;
    color: #777a7a;
  }
  .groupPurchase ul{
    list-style: none;
    font-size: 0;
    height: 250px;
    box-sizing: border-box;
  }
  .groupPurchase ul li{
    display: inline-block;
    width: 25%;
    text-align: center;
  }
  .groupPurchase ul li img{
    width: 80%;
  }
  .groupPurchase ul li span{
    display: inline-block;
    width: 70px;
    background: red;
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
  }
</style>
